<template>
  <div class="app-container" v-loading="loading">
        <levelbar></levelbar>
         <el-form label-width="150px"  class="app-content goods-manage-add-goods" 
         :rules="rules" :model="dataForm" ref="dataForm">
            <div class="box">
                <div class="form-title" v-show="!$route.params.id?true:false">{{dataForm.type=='1'?'勋章添加':dataForm.type=='2'?'实物商品添加':'虚拟商品添加'}}</div>
                <div class="form-title" v-show="$route.params.status=='2'?true:false">商品编辑</div>
                <div class="form-title" v-show="$route.params.status=='1'?true:false">商品查看</div>
                <!-- 添加和编辑 -->
                <div class="form-box" v-if="$route.params.status!=='1'">
                        <el-row :gutter="41" >
                              <!-- 勋章6位 -->
                             <el-col :span="11"  v-if="dataForm.type=='1'">
                                <el-form-item label="商品名称" prop="productName" :rules="rules.productName">
                                     <el-popover placement="top-start" trigger="focus" content="字符长度不得超过6位，且不得含有空格！">
                                       <el-input v-model="dataForm.productName" placeholder="请输入商品名称" slot="reference" :maxlength="6"></el-input>
                                     </el-popover>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" v-if="dataForm.type!=='1'">
                                <el-form-item label="商品名称" prop="productName" :rules="rules.productName">
                                     <el-popover placement="top-start" trigger="focus" content="字符长度不得超过10位，且不得含有空格！">
                                       <el-input v-model="dataForm.productName" placeholder="请输入商品名称" slot="reference" :maxlength="10"></el-input>
                                     </el-popover>
                                </el-form-item>
                            </el-col>
                            <!-- 添加 -->
                             <el-col :span="11" :offset="2" v-if="!$route.params.id">
                                <el-form-item label="商品类型" prop="type">
                                <el-select v-model="dataForm.type" placeholder="请选择商品类型" @change="goodTypeChange"
                                style="width:100%">
                                        <el-option v-for="(item,index) in goodsTypeArr" 
                                        :key="index" :label="item.typeName" 
                                        :value="item.typeId"> </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <!-- 编辑 -->
                             <el-col :span="11" :offset="2" v-if="$route.params.id">
                                <el-form-item label="商品类型"  prop="type">
                                    <span v-cloak>{{ dataForm.type == '0' ? '虚拟商品' : dataForm.type == '1' ? '勋章' : dataForm.type == '2' ? '实物商品':'--'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="41" >
                            <el-col :span="11">
                                <el-form-item label="商品库存数量" prop="remainCount" :rules="rules.remainCount">
                                    <el-popover placement="top-start" trigger="focus" content="商品库存数量为 1-999999 的正整数！">
                                        <el-input v-model="dataForm.remainCount" placeholder="商品库存数量不得为空" slot="reference" :maxlength="6"></el-input>
                                     </el-popover>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" :offset="2">
                                <el-form-item label="商品标签" prop="tag" :rules="rules.tag">
                                      <el-popover placement="top-start" trigger="focus" content="字符长度不得超过4位！">
                                       <el-input v-model="dataForm.tag" placeholder="请输入商品标签" slot="reference" :maxlength="4"></el-input>
                                     </el-popover>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <div class="form-item">
                            <div class="form-item-title">
                                <span class="note-css"></span>
                                <span class="title-level" v-if="dataForm.type!=='2'"><font color="red">*</font>&nbsp;商品图片&nbsp;(140*140)</span>
                                <span class="title-level" v-if="dataForm.type=='2'"><font color="red">*</font>&nbsp;商品图片&nbsp;(140*140)</span>
                            </div>
                            <!-- <div class="form-content" :class="{'upload-image-max':fileListMaxLen==1 }"> -->
                            <div class="form-content">
                                <el-row :gutter="41">
                                    <el-col :span="11" class="upload-image">
                                        <el-form-item label="">
                                            <fileUpload 
                                            @remove="fileImgRemove" 
                                            :isMultiple="imgOptions.isMultiple"
                                            :file-list.sync="imgOptions.fileList" 
                                            :file-list-show.sync="imgOptions.fileListShow" 
                                            :list-type="imgOptions.listType"
                                            :up-file-type="imgOptions.upFileType"
                                            :accept-list="imgOptions.accept"
                                            @onSuccess="onSuccess"
                                            @fileChange="fileChange"
                                            :imgSize='0.1953125'
                                            >
                                            <div class="up-container el-upload">
                                                <i class="el-icon-plus"></i>
                                            </div>
                                         </fileUpload>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <el-row :gutter="41" v-if="dataForm.type=='2'">
                             <div>
                                <el-col :span="11">
                                    <el-form-item label="商品价格(现金)" prop="cash" :rules="rules.cash">
                                        <el-popover placement="top-start" trigger="focus" content="商品价格为 0-99999.99">
                                            <el-input v-model="dataForm.cash" placeholder="请输入商品价格(现金)" slot="reference"></el-input>
                                        </el-popover>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="11" :offset="2">
                                    <el-form-item label="商品价格(旧价格)" prop="oldCash" :rules="rules.oldCash">
                                    <el-popover placement="top-start" trigger="focus" content="商品价格为 0-99999.99">
                                        <el-input v-model="dataForm.oldCash" placeholder="请输入商品价格(旧价格)"  slot="reference"></el-input>
                                        </el-popover>
                                    </el-form-item>
                                </el-col>
                               </div>
                        </el-row>
                        <el-row :gutter="41" v-if="dataForm.type=='1'">
                            <el-col :span="11">
                                <el-form-item label="红包名称" prop="bonusName" :rules="rules.bonusName">
                                    <div>
                                        <el-popover placement="top-start" trigger="focus" content="字符长度不得超过10位！">
                                        <el-input v-model="dataForm.bonusName" placeholder="请输入红包名称" slot="reference" :maxlength="10"></el-input>
                                        </el-popover>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" :offset="2">
                                    <div>
                                <el-form-item label="红包金额" prop="bonusPrice" :rules="rules.bonusPrice">
                                     <el-popover placement="top-start" trigger="focus" content="红包金额为 1-99999 的正整数">
                                       <el-input v-model="dataForm.bonusPrice" placeholder="请输入红包金额" slot="reference" :maxlength="5"></el-input>
                                     </el-popover>
                                </el-form-item>
                                    </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="41">
                            <el-col :span="11">
                                <div>
                                    <el-form-item label="商品价格(积分)" prop="price" :rules="rules.price">
                                        <el-popover placement="top-start" trigger="focus" content="商品价格为 1-999999 的正整数！">
                                        <el-input v-model="dataForm.price" placeholder="请输入商品价格(积分)" slot="reference" :maxlength="6"></el-input>
                                        </el-popover>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="41">
                            <el-col :span="11">
                                <el-form-item label="商品简介">
                                    <div>
                                      <el-input
                                                type="textarea"
                                                :rows="4"
                                                placeholder="请输入商品简介(字符长度不得超过50位！)"
                                                v-model="dataForm.desc" :maxlength="50">
                                        </el-input>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    <div class="form-item" v-if="dataForm.type=='2'">
                        <div class="form-item-title">
                            <span class="note-css"></span>
                            <span class="title-level" style="padding-left: 42px;"><font color="red">*</font>&nbsp;产品详情描述</span>
                        </div>
                        <div class="form-content">
                            <el-row :gutter="21">
                                <el-col :span="22">
                                    <el-form-item label="">
                                        <Tinymce :height="260"  :id="tinymceId"
                                        v-model="dataForm.detailDesc"></Tinymce>
                                        <p class="note">产品详情描述内容输入不要超过1000字符！</p>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <el-form-item class="footer">
                        <el-button @click="resetForm('dataForm')">取消</el-button>
                        <el-button type="primary" @click="submitForm('dataForm')" 
                        >确认</el-button>
                    </el-form-item>
                </div>
                <!-- 查看 -->
                 <div class="form-box"  v-if="$route.params.status=='1'">
                        <el-row :gutter="41" >
                            <el-col :span="11">
                                <el-form-item label="商品名称：">
                                    <span>{{dataForm.productName}}</span>
                                </el-form-item>
                            </el-col>
                             <el-col :span="11" :offset="2">
                                <el-form-item label="商品类型：">
                                    <span v-cloak>{{ dataForm.type == '0' ? '虚拟商品' : dataForm.type == '1' ? '勋章' : dataForm.type == '2' ? '实物商品':'--'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="41" >
                            <el-col :span="11">
                                <el-form-item label="商品库存数量：" >
                                       <span>{{dataForm.remainCount?dataForm.remainCount:'--'}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" :offset="2">
                                <el-form-item label="商品标签：">
                                      <span>{{dataForm.tag?dataForm.tag:'--'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="41" v-if="dataForm.type=='2'">
                            <el-col :span="11">
                                <el-form-item label="商品价格(现金)：">
                                     <span>{{dataForm.cash?dataForm.cash:'--'}}</span>
                                </el-form-item>
                            </el-col>
                             <el-col :span="11" :offset="2">
                                <el-form-item label="商品价格(旧价格)：">
                                    <span>{{dataForm.oldCash?dataForm.oldCash:'--'}}</span>
                                </el-form-item>
                              </el-col>
                        </el-row>
                         <el-row :gutter="41" v-if="dataForm.type=='1'">
                            <el-col :span="11">
                                <el-form-item label="红包名称：">
                                     <span>{{dataForm.bonusName?dataForm.bonusName:'--'}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" :offset="2">
                                <el-form-item label="红包金额：">
                                    <span>{{dataForm.bonusPrice?dataForm.bonusPrice:'--'}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="41">
                            <el-col :span="11">
                                <span class="good-price">
                                &nbsp;商品价格(积分)：</span>
                                <div>
                                    <el-form-item label="">
                                        <span>
                                            {{dataForm.price?dataForm.price:'--'}}
                                        </span>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="41">
                            <el-col :span="11">
                                <el-form-item label="商品简介：">
                                    <span v-html="showContent(dataForm.desc)"></span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                         <div class="form-item">
                            <div>
                                <span class="note-css"></span>
                                <span class="check-pic">&nbsp;商品图片：</span>
                                <span v-if="dataForm.type=='2'"><img class="check-detail-pic" :src="dataForm.imageUrl"></span>
                                <span v-if="dataForm.type!=='2'"><img class="check-detail-pic-other" :src="dataForm.imageUrl"></span>
                            </div>
                        </div>
                        <div>
                            <div class="form-item-desc-title" v-if="dataForm.type=='2'" style="display:flex;">
                                <div class="form-item-title check-detail-desc-title">
                                    <span class="note-css"></span>
                                    <span class="title-level" style="padding-left: 42px;">&nbsp;产品详情描述：</span>
                                </div>
                                <div v-html="dataForm.detailDesc" class="detail-desc check-detail-desc read-recod-check">
                                </div>
                            </div>
                        </div>
                    <el-form-item class="footer">
                        <el-button @click="resetForm('dataForm')">返回</el-button>
                    </el-form-item>
                </div>
            </div>
        </el-form>
  </div>
</template>
<script>
import Levelbar from '../../../layout/Levelbar';
import fileUpload from 'components/Upload/fileUpload';
import Tinymce from 'components/Tinymce';
import { addProduct, getInfoDetail, changeProduct, uploadProduct} from 'api/creditShop';
export default {
    name: 'addGoods',
    components: { Levelbar, Tinymce, fileUpload},
    data() {
        return {
            loading: false, // 确定按钮的加载
            tinymceId: 'tinymceId',
            dataForm: {
                productName: '', // 商品名称
                type: '0', // 商品类型
                desc: '', // 商品简介
                cash: '', // 现金
                price: '', // 积分
                oldCash: '', // 原价
                bonusName: '', // 红包名
                bonusPrice: '', // 红包金额
                remainCount: '', // 剩余数量
                tag: '', // 标签
                isGive: '', // 赠送
                isSel: '', // 兑换
                imageUrl: '', // 图片src
                detailDesc: '',
                title: '',
                fileUrl: '',
                fileName: ''
            },
            //   商品类型
            goodsTypeArr: [
              {typeName: '虚拟商品', typeId: '0'},
              {typeName: '勋章', typeId: '1'},
              {typeName: '实物商品', typeId: '2'}
            ],
            imgOptions: {
                upFileType: 'image',
                fileListShow: true,
                fileList: [],
                isMultiple: false
            },
            fileListMaxLen: 0,
            rules: {
                productName: [
                    { required: true, message: '请输入商品名称', trigger: 'blur'},
                    { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur' }
                ],
                tag: [
                    { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur' }
                ],
                // 商品价格（积分）
                price: [
                     { required: true, message: '请输入商品价格(积分)', trigger: 'blur'},
                     { pattern: /^\+?[1-9]\d*$/, message: '商品价格(积分)为1-999999的正整数', trigger: 'blur'}
                ],
                 // 现金
                cash: [
                   { pattern: /^\d{1,5}(\.\d{1,2})?$/, message: '商品价格(现金)为0-99999.99', trigger: 'blur'}
                ],
                oldCash: [
                     { required: true, message: '请输入商品价格(旧价格)', trigger: 'blur'},
                     { pattern: /^\d{1,5}(\.\d{1,2})?$/, message: '商品价格(旧价格)为0-99999.99', trigger: 'blur'}
                ],
                type: [
                   {required: true, message: '请输入商品类型', trigger: 'blur'}
                ],
                bonusName: [
                   {required: true, message: '请输入红包名称', trigger: 'blur'}
                ],
                bonusPrice: [
                   {required: true, message: '请输入红包金额', trigger: 'blur'},
                   { pattern: /^\+?[1-9]\d*$/, message: '红包金额为 1-99999 的正整数', trigger: 'blur'}
                ],
                isGive: [
                   {required: true, message: '请选择是否赠送', trigger: 'blur'}
                ],
                isSel: [
                   {required: true, message: '请选择是否兑换', trigger: 'blur'}
                ],
                remainCount: [
                    {required: true, message: '请输入商品库存数量', trigger: 'blur'},
                    { pattern: /^\+?[1-9]\d*$/, message: '商品库存数量为1-999999的正整数', trigger: 'blur'}
                ]
            }
        }
    },
    created() {
        this.getDetailInfor();
    },
    methods: {
        // 要是有id（就是编辑商品）就回填对应信息
        getDetailInfor() {
            if (this.$route.params.status) {
                this.loading=true;
                let id=this.$route.params.id;
                getInfoDetail(id).then(res => {
                    this.loading=false;
                    let infor=res.data.content;
                    this.backFill(infor);
                }).catch(() => {
                    this.loading=false;
                });
            }
        },
    // 确定按钮
    // 如果有商品价格（积分）和商品价格(现金) 同时存在时，两个至少一个填写上，
    // 当选择勋章和实物商品时，默认两个单选都选否，并且禁止掉操作
        goodTypeChange(val) {
            this.dataForm.type = val;
            this.dataForm.cash='';
            this.dataForm.bonusName='';
            this.dataForm.bonusPrice='';
            this.dataForm.oldCash='';
            this.dataForm.detailDesc='';
            this.dataForm.cash='';
        },
        submitForm(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (!this.imgOptions.fileList.length) {
                    this.$message({
                        type: 'info',
                        message: '请上传图片！'
                    });
                    return;
                }
                if (this.imgOptions.fileListShow==false) {
                    this.imgOptions.fileList=[];
                    this.$message({
                        type: 'info',
                        message: '请上传图片！'
                    });
                    return 
                }
                if (this.dataForm.type==2) {
                    // 没有图片
                    let tempHtml = window.tinymce.get('tinymceId').getContent({format: 'raw'});
                    if (tempHtml.indexOf('img') === -1) {
                        if (!window.tinymce.get('tinymceId').getContent({format: 'text'}).trim()) {
                            this.$message.info('请输入产品详情描述');
                            return false;
                        }
                        if (window.tinymce.get('tinymceId').getContent({format: 'text'}).trim().length > 1000) {
                            this.$message.info('产品详情描述字数不得大于1000字');
                            return false;
                        }
                    }
                }
                if (valid) {
                    this.$confirm('确定要提交吗?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(() => {
                        if (this.dataForm.type=='2') {// 在实物模式下
                            this.uploadProduct()
                        } else {
                            this.addProduct();
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        // 取消
        resetForm(ruleForm) {
            this.$router.push({path: '/goodsManage/goodsManage'});
        },
        // 转化编辑文档内容的格式
        uploadProduct() {
            this.loading=true;
            let productName=this.dataForm.productName;
            let desc=this.dataForm.desc;
            let price=this.dataForm.price;
            let cash=this.dataForm.cash;
            let oldCash=this.dataForm.oldCash;
            let picture=this.dataForm.imageUrl;
            let bonusName=this.dataForm.bonusName;
            let bonusPrice=this.dataForm.bonusPrice;
            let remainCount=this.dataForm.remainCount;
            let isGive=this.dataForm.isGive;
            let isSel=this.dataForm.isSel;
            let type=this.dataForm.type;
            let tag=this.dataForm.tag;
            let detailDesc=this.dataForm.detailDesc;
            uploadProduct(
                    productName,
                    desc,
                    price,
                    cash,
                    oldCash,
                    picture,
                    bonusName,
                    bonusPrice,
                    remainCount,
                    isGive,
                    isSel,
                    type,
                    tag,
                    detailDesc
            ).then(res => {
                this.loading=false;
                let detailCon=res.data.content;// 转换后的格式
                this.addProduct(detailCon);
            }).catch(() => {
                this.loading=false;
            });
        },
        // 添加商品(里面判断是编辑还是添加的操作)
        addProduct(detailCon) {
            this.loading=true;
            let productName=this.dataForm.productName;
            let desc=this.dataForm.desc;
            let price=this.dataForm.price;
            let cash=this.dataForm.cash;
            let oldCash=this.dataForm.oldCash;
            let picture=this.dataForm.imageUrl;
            let bonusName=this.dataForm.bonusName;
            let bonusPrice=this.dataForm.bonusPrice;
            let remainCount=this.dataForm.remainCount;
            let isGive=this.dataForm.isGive;
            let isSel=this.dataForm.isSel;
            let type=this.dataForm.type;
            let tag=this.dataForm.tag;
            let detailDesc=this.dataForm.detailDesc;// 原来的
            let detailHtmlUrl=detailCon?detailCon:'';// 有转化需求的 发转化后的，不然空
            let id='';
            if (this.$route.params.id) {// 如果是编辑商品
                id=this.$route.params.id;
                changeProduct(
                    id,
                    productName,
                    desc,
                    price,
                    cash,
                    oldCash,
                    picture,
                    bonusName,
                    bonusPrice,
                    remainCount,
                    isGive,
                    isSel,
                    tag,
                    detailDesc,
                    detailHtmlUrl
                ).then(res => {
                    this.$store.dispatch('UpdateCache', true);
                    this.loading=false;
                    this.$message.success('编辑商品成功');
                    this.$router.push({path: '/goodsManage/goodsManage'});
                }).catch(res => {
                    this.loading=false;
                });
            } else {// 如果是添加商品
                addProduct(
                    productName,
                    desc,
                    price,
                    cash,
                    oldCash,
                    picture,
                    bonusName,
                    bonusPrice,
                    remainCount,
                    isGive,
                    isSel,
                    type,
                    tag,
                    detailDesc,
                    detailHtmlUrl
                    ).then(res => {
                        this.$store.dispatch('UpdateCache'); 
                        this.loading=false;
                        this.$message.success('添加商品成功');
                        this.$router.push({path: '/goodsManage/goodsManage'});
                    }).catch(res => {
                        this.loading=false;
                    });
            }
        },
        fileChange(fileListLen) {
            if (fileListLen==1) {
                this.fileListMaxLen=1;
            }
        },
        showContent(content) {
            return content?content.replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;'):'';
        },
         // 移除图片
        fileImgRemove(file) {
            // console.log('9999')
            this.dataForm.imageUrl = null; 
            this.imgOptions.fileList=[];
            this.fileListMaxLen=0;
        },
         // 上传图片成功后获取图片路径
        onSuccess(data) {
            this.dataForm.imageUrl = data.imgUrl;
            this.imgOptions.fileList.push({name: '', url: data.imgUrl});
            this.fileListMaxLen=1;
            this.$message.success('上传成功'); 
        },
         // 回填
        backFill(infor) {
            this.dataForm.productName=infor.productName;
            this.dataForm.type=infor.type;
            this.dataForm.desc=infor.desc?infor.desc:'';
            this.dataForm.cash=infor.cash?infor.cash:'';
            this.dataForm.price=infor.price?infor.price:'';
            this.dataForm.oldCash=infor.oldCash?infor.oldCash:'';
            this.backFill2(infor);
        },
        backFill2(infor) {
            this.dataForm.bonusName=infor.bonusName?infor.bonusName:'';
            this.dataForm.bonusPrice=infor.bonusPrice?infor.bonusPrice.split('.')[0]:'';
            this.dataForm.remainCount=infor.remainCount?infor.remainCount:'';
            this.dataForm.tag=infor.tag?infor.tag:'';
            if (infor.picture) {
                this.dataForm.imageUrl=infor.picture;
                this.imgOptions.fileList.push({name: '', url: infor.picture});
                this.fileListMaxLen=1;
            } else {
                this.dataForm.imageUrl='';
                this.imgOptions.fileList=[]
                this.fileListMaxLen=0;
            }
            this.dataForm.detailDesc=infor.detailDesc;
        } 
    }
}
</script>
<style lang="scss" scoped>
$bgcolor: #fff;
@mixin showTitle() {
            background: $bgcolor;
           box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        }
    .app-content {
            padding: 0px 50px 40px;
            @include showTitle();
            .form-title {
            padding-top: 8px;
                text-align: center;
                font-size: 18px;
                color: #333;
                line-height: 72px;
                font-weight: bold;
                font-family: Microsoft YaHei;
                border-bottom: 1px solid #ddd;
                margin-bottom:40px;
            }
    }
     .note {
        font-size: 12px;
        color: #666;
     }
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .avatar-uploader-icon{
        font-size: 28px;
        color: #8c939d; 
        width: 140px !important; 
        height: 140px !important; 
        line-height: 140px !important;
        text-align: center;
    }
    .form-item-title{
        display: inline-block;
        width:200px;
    }
    .check-detail-pic{
        vertical-align: top;
        display: inline-block;
        width:210px;
        height:140px;
        border:1px solid #ccc;
        position: relative;
        top: 4px;
        left: -15px;
    }
     .check-detail-pic-other{
        vertical-align: top;
        display: inline-block;
        width:140px;
        height:140px;
        border:1px solid #ccc;
        position: relative;
        left: -15px;
    }
    .box {
            background: #fff;
            .appTitle {
               border-bottom: 1px solid #ECECEC;
               text-align: center;
               font-weight: 700;
               font-size:16px;
               height: 70px;
               line-height: 70px;
               margin-bottom:50px;
            }
            .footer {
                text-align: center;
                margin-top: 40px;
                left: -100px;
                position: relative;
             }
        }
         .upload-image {
             display: block;
            .avatar-uploader .el-upload {
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            .avatar-uploader .el-upload:hover {
                border-color: #20a0ff;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
            }
            .avatar {
                width: 178px;
                height: 178px;
                display: block;
            }

        }
        .title-level{
            display: inline-block;
            text-align: left;
            vertical-align: middle;
            font-size: 14px;
            color: rgb(106, 85, 72);
            line-height: 1;
            padding: 11px 12px 11px 8px;
            box-sizing: border-box;
        }
        .form-item {
        padding-bottom: 40px;
        }
          .footer {
          text-align: center;
          padding-top: 80px;
        }
        .good-price{
            display: inline-block;
            text-align: right;
            vertical-align: middle;
            font-size: 14px;
            color: #6a5548;
            line-height: 1;
            padding: 11px 12px 11px 0;
            box-sizing: border-box;
            float:left;
            width: 150px;
        }
        .detail-desc{
            padding-left:150px;
            font-size:14px;
            color:#333;
            li{
                list-style:none
            }
            img{
                display:inline-block;
                max-width: 1000px;
            }
        }
        .check-detail-desc{
            overflow: hidden;
            padding:8px;
            border:1px solid #ccc;
            width:800px;
            min-height: 100px;
            position: relative;
            left: -10px;
            top: 8px;
        }
        .check-pic{
                display: inline-block;
                text-align: left;
                vertical-align: middle;
                font-size: 14px;
                color: #6a5548;
                line-height: 1;
                box-sizing: border-box;
               margin-left: 63px;
                width: 100px;
        }
        .check-detail-desc-title{
            width: 163px;
        }
}
</style>

